<template>
  <div class="body">
    <!-- 导航栏 -->
    <div class="header">
      <div class="img">
        <!-- <img src="./testImages/logo.5e0cd62d.png" alt=""> -->
        <h1>智慧养老辅助平台 | 家庭服务•家政预约</h1>
      </div>
      <div class="navB">
        <ul>
          <li class="flexBoxCenter">
            <router-link :to="{ path: '/volunteer', query: { loginUserId: this.loginUserId } }" style="text-decoration: none;color: #eee;">
              志愿服务
            </router-link>
          </li>
          <li class="flexBoxCenter">
            <router-link :to="{ path: '/OrderPage', query: { loginUserId: this.loginUserId } }"
              style="text-decoration: none;color: #eee;">
              预约订餐
            </router-link>
          </li>
          <li class="flexBoxCenter">
            <router-link :to="{ path: '/hospital', query: { loginUserId: this.loginUserId } }"
              style="text-decoration: none;color: #eee;">
              预约挂号
            </router-link>
          </li>
          <li class="flexBoxCenter"> <router-link :to="{ path: '/tourism',query: { loginUserId: this.loginUserId }  }" style="text-decoration: none;color: #eee;">
              旅行团建
            </router-link></li>
          <li class="flexBoxCenter">
            <router-link :to="{ path: '/loginPage' }" style="text-decoration: none;color: #eee;">
              退出登录
            </router-link>
          </li>
        </ul>
      </div>
    </div>


    <!-- 分页01 -->
    <div class="page p1  at">


      <!-- main 01 -->
      <div class="main">
        <!-- left -->
        <div class="lf">
          <div class="ft">
            家电维修
          </div>
          <div class="eng">Appliance repairs</div>
          <img src="./images/家电维修.png" alt="" class="star">
        </div>
        <!-- right -->
        <div class="rh">
          <div class="rh-show">
            <div class="rh-b"><img src="./images/wsfw_bxwx_84f9ff6.png" alt="">
              <div class="rh-hp">

                <h3>冰箱维修</h3>


                <p>商用,家用冰箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/wxfw_ktwx_13950f8.png" alt="">
              <div class="rh-hp">

                <h3>空调维修</h3>


                <p>专业技师,专注维修</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/wsfw_ktjf_bdfd844.png" alt="">
              <div class="rh-hp">

                <h3>空调加氟</h3>


                <p>专业加氟,使用放心</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/wxfw_gdst_6e7389d.png" alt="">
              <div class="rh-hp">

                <h3>管道疏通</h3>


                <p>快速疏通,轻松快捷</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/mtwx_hdd_c0c8b76.png" alt="">
              <div class="rh-hp">

                <h3>马桶维修</h3>


                <p>专业安装,更换马桶</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/mtwx_hdd_c0c8b76.png" alt="">
              <div class="rh-hp">

                <h3>换锁</h3>


                <p>精于探锁,贵在创芯</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/hsc_e0a17cd.png" alt="">
              <div class="rh-hp">

                <h3>换纱窗&nbsp;</h3>


                <p>扼纱危险,窗造平安</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/djaz_hdd_05e062b.png" alt="">
              <div class="rh-hp">

                <h3>灯具安装</h3>


                <p>安装保障,安全无忧</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/djaz_jsqlxgh_0dbaee8.png" alt="">
              <div class="rh-hp">

                <h3>滤芯更换</h3>


                <p>更换滤芯,饮水安全</p>


              </div>
            </div>

          </div>
        </div>

      </div>





    </div>
    <!-- 分页02 -->
    <div class="page p2">


      <!-- main 01 -->
      <div class="main">
        <!-- left -->
        <div class="lf">
          <div class="ft">
            保洁服务
          </div>
          <div class="eng">Cleaning services</div>
          <img src="./images/保洁.png" alt="" class="star">


        </div>
        <!-- right -->
        <div class="rh">
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bj_rcbj_e4ed91e.png" alt="">
              <div class="rh-hp">

                <h3>日常保洁</h3>


                <p>专业工具,擦洗扫拖</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_cbl_1dfa828.png" alt="">
              <div class="rh-hp">

                <h3>擦玻璃</h3>


                <p>专业喷剂,洁净玻璃</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_sdbj_a3391df.png" alt="">
              <div class="rh-hp">

                <h3>深度保洁</h3>


                <p>洁净超出想象&nbsp;&nbsp;&nbsp;&nbsp;</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bj_xjkh_febbe20.png" alt="">
              <div class="rh-hp">

                <h3>新居开荒</h3>


                <p>新居入住,亲扫装修</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_cfby_d4274e1.png" alt="">
              <div class="rh-hp">

                <h3>厨房保养</h3>


                <p>厨房保养,敞亮空间</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_wsjby_5315cd6.png" alt="">
              <div class="rh-hp">

                <h3>厕所保养</h3>


                <p>厕所保养,敞亮光洁</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bj_jtcqbj_2970d37.png" alt="">
              <div class="rh-hp">

                <h3>长期保洁</h3>


                <p>帮您摆脱繁琐家务&nbsp;</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_dbdl_d83a02a.png" alt="">
              <div class="rh-hp">

                <h3>地板打蜡</h3>


                <p>天然蜂蜡,温和养护</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bj_pzsfby_560c836.png" alt="">
              <div class="rh-hp">

                <h3>皮质沙发</h3>


                <p>无风清洁,滋润养护</p>


              </div>
            </div>

          </div>
        </div>

      </div>





    </div>
    <!-- 分页03 -->
    <div class="page p3">


      <!-- main 01 -->
      <div class="main">
        <!-- left -->
        <div class="lf">
          <div class="ft">
            月嫂保姆
          </div>
          <div class="eng">Confinement nanny</div>
          <img src="./images/月嫂.png" alt="" class="star">
        </div>
        <!-- right -->
        <div class="rh">
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bmys_ys_8eacec9.png" alt="">
              <div class="rh-hp">

                <h3>月嫂&nbsp;&nbsp;</h3>


                <p>呵护母婴,体贴放心</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bmys_yes_6be8cd5.png" alt="">
              <div class="rh-hp">

                <h3>育儿嫂&nbsp;</h3>


                <p>专业呵护,快乐成长</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bmys_bm_b06993d.png" alt="">
              <div class="rh-hp">

                <h3>保姆&nbsp;&nbsp;</h3>


                <p>专业保姆,全能管家</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bmys_lrph_3b92857.png" alt="">
              <div class="rh-hp">

                <h3>老人陪护</h3>


                <p>至亲至爱,暖心陪伴</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bmys_jtcqzf_4c5ee2b.png" alt="">
              <div class="rh-hp">

                <h3>家庭做饭</h3>


                <p>全能管家,贴心服务</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bmys_crfw_945665e.png" alt="">
              <div class="rh-hp">

                <h3>催乳服务</h3>


                <p>贴心呵护,喂爱呵护</p>


              </div>
            </div>

          </div>
          <div class="rh-show">
            <div class="rh-b"><img src="./images/bmys_lrzj_e641f3a.png" alt="">
              <div class="rh-hp">

                <h3>老人助洁</h3>


                <p>用心关怀,全面护理</p>


              </div>
            </div>
            <div class="rh-b"><img src="./images/bmys_lskh_11f2d5e.png" alt="">
              <div class="rh-hp">

                <h3>临时看护</h3>


                <p>关爱老人,理应所养</p>


              </div>
            </div>
            <div class="rh-b" style="opacity: 0;"><img src="./images/bj_pzsfby_560c836.png" alt="">
              <div class="rh-hp">

                <h3>皮质沙发</h3>


                <p>无风清洁,滋润养护</p>


              </div>
            </div>

          </div>
        </div>

      </div>





    </div>

    <!-- Bottom -->
    <div class="bottom">
      <!-- 步骤条 -->
      <div class="steps">
        <ul>
          <li>
            <p class="p active"><span>01</span></p>

          </li>
          <div class="b"></div>
          <li>
            <p class="p"><span>02</span></p>

          </li>
          <div class="b"></div>
          <li>
            <p class="p"><span>03</span></p>

          </li>
        </ul>
      </div>
      <!-- 底部logo -->
      <div class="bl">
        <!-- <img src="./images/tsinghua_logo.efbded73.png" alt=""> -->
        <h3>智慧养老辅助平台</h3>
      </div>
    </div>




  </div>
</template>

<script>
export default {
  data() {
    return {
      loginUserId: 0,
      pages: [],
      lis: [],
      n: 0
    }
  },

  methods: {
    home() {
      this.$router.push({ name: 'hd' })
    },
    roll: function () {
      // 滚轮滑动效果
      // 获取全部分页 page
      this.pages = document.querySelectorAll('.page')
      this.lis = document.querySelectorAll('.steps .p')

      // 定义全局变量n 用于页面的切换
      this.n = 0
      // document.addEventListener('wheel',listenOfRoll(e))

    },
    listenOfRoll(e) {
      const liActive = document.querySelector('.steps .active')
      const at = document.querySelector('.at')
      // console.log(at)
      at.classList.remove('at')
      liActive.classList.remove('active')
      e = e || window.event;
      if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) { //当滑轮向上滚动时
          if (this.n > 0) {
            this.n--
            this.pages[this.n].classList.add('at')
            this.lis[this.n].classList.add('active')
          } else {
            this.pages[this.n].classList.add('at')
            this.lis[this.n].classList.add('active')
          }
        }
        if (e.wheelDelta < 0) { //当滑轮向下滚动时
          if (this.n < 2) {
            this.n++
            this.pages[this.n].classList.add('at')
            this.lis[this.n].classList.add('active')
          } else {
            this.pages[this.n].classList.add('at')
            this.lis[this.n].classList.add('active')
          }
        }
      } else if (e.detail) {  //Firefox滑轮事件
        if (e.detail > 0) { //当滑轮向上滚动时
          alert("滑轮向下滚动");
        }
        if (e.detail < 0) { //当滑轮向下滚动时
          alert("滑轮向上滚动");
        }
      }
    }
  },
  mounted() {
    // mounted在生命周期为当DOM对象创建完后进行加载
    this.loginUserId = this.$route.query.loginUserId

    this.roll()
    document.addEventListener('wheel', this.listenOfRoll)
  },
  destroyed() {
    // destroyed为生命周期的销毁环节，当页面被卸载时执行
    document.removeEventListener('wheel', this.listenOfRoll)
  },
}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
}

/* html, */
.body {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(./images/home-b1.png);
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 100% 100%;
  z-index: -1
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;

  transition: all .8s;
  top: 100%;

}

.p1 {
  background-image: url(./images/home_bg1.4d383b56.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.p2 {
  background-image: url(./images/home_bg3.bd26f56c.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

.p3 {
  background-image: url(./images/home_bg2.b957efd1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 20;
}

/* 控制 page页面效果 */
.at {
  top: 0;
}



a {
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  outline: none;
}

ul {
  list-style-type: none;
}

.header {
  padding: 35px 50px;
  width: 100%;

  position: fixed;
  z-index: 999;
}

.header .img {
  float: left;
}

.header .navB {
  float: inline-end;
}

.header .navB a {
  color: #fff;
}

.header .navB ul {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-width: 78px;
  padding: 0 20px;
  color: #fff;
}

.header .img h1 {
  color: #fff;
  font-size: 22px;
}

.header .navB ul .flexBoxCenter {
  height: 70px;
  line-height: 70px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header .navB ul .flexBoxCenter:hover {
  font-weight: bold;
  border-bottom: 3px solid #fff;
}

/* 主要部分 */
.main {
  display: flex;
  height: 540px;
  width: 88.12%;

  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.main .lf {


  height: 100%;
  width: 291px;
}

.main .ft {
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fffeff;
  line-height: 24px;
  margin: 100px 0 110px 0;
}

.main .eng {
  font-size: 48px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #fffeff;
  line-height: 24px;
  opacity: 0.2;
  position: absolute;
  top: 170px;
}

.main .star {
  opacity: 0.5;
  width: 22%;
  height: auto;
}

.main .rh {
  background-color: #fff;
  height: 100%;
  width: 78%;
  z-index: 1;
}

.main .rh ul {
  display: flex;
}


/* 底部 */
.bottom {

  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0 60px;
  z-index: 999;

}

.bottom .steps ul {
  float: left;
  display: flex;
  align-items: center;
  height: 60px;
  margin-bottom: 21px;

}

.bottom .steps ul .p {
  color: #ffffff00;
  ;
  text-align: center;
  font-weight: bold;
  padding: 2px 10px;

  font-weight: bold;
  border-bottom: 1px solid #fff;
  transition: all .3s;


}

.bottom .steps ul .active {
  border-bottom: 7px solid #fff;
  margin-top: 5px;
  color: #fff;

}

.bottom .steps ul .b {
  margin: 6px;

}

.bottom .bl {
  margin-top: 40px;
  float: right;

}

.bottom .bl h3 {
  color: #fff;
  font-size: 16px;
}

.rh-show {
  display: flex;
  place-items: center;
  margin-top: 76px;
  margin-left: 14px;
  height: 80px;
}

.rh-show div {
  margin-right: 110px;


}

.rh-show img {
  width: 64px;
  height: 64px;
  margin: 14px auto;
  display: block;
}



.rh-hp {
  position: relative;
  top: -70px;
  left: 150px;
}

.rh-hp:hover {
  cursor: pointer;
}




.rh-hp p {
  font-size: 14px;
  color: #999;
  margin-top: 6px
}
</style>